<template>
  <div>
  <div class="title">周末去哪儿</div>
  <ul>
    <li class="item border-bottom" v-for="item of recommendList" :key="item">
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" />
      </div>
      <div class="item-info">
        <p class="item-title">{{item.heading}}</p>
        <p class="item-desc">{{item.text}}</p>
      </div>
    </li>
  </ul>
  </div>
</template>
<script>
export default {
 name: "homeWeekend",
 data () {
   return {
     recommendList:[{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第1次',
       heading:'di1',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第2次',
       heading:'di2',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第3次',
       heading:'di3',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第4次',
       heading:'di4',
     },{
       id:'0001',
       imgUrl:'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
       text:'第5次',
       heading:'di5',
     }]
   }
 }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'

.title
  margin-top .2rem;
  line-height .8rpx;
  background :#eee;
  text-indent :.2rem;
.item-img-wrapper
  height :0
  overflow :hidden
  padding-bottom :33.9%
    .item-img
        width: 100%
.item-info
    padding :.1rem
    .item-title
        line-height :.54rem
        font-size :.32rem
        ellipsis()
    .item-desc
        line-height :.4rem
        color :#ccc
        ellipsis()




</style>
